<template>
<transition name="van-fade">
  <div class="login" v-show="visible">
    <van-nav-bar title="用户登录" left-arrow @click-left="onClickLeft" />
    <div class="user">
      <van-cell-group>
        <van-field
          v-model.lazy.trim="username"
          required
          clearable
          label="用户名"
          right-icon="question-o"
          placeholder="请输入用户名"
          @click-right-icon="$toast('用户名不可为空')"
        />

        <van-field
          v-model.lazy.trim="password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          required
        />
      </van-cell-group>
      <van-button
        type="primary"
        size="large"
        class="btn"
        @click="toLogin()"
        v-show="!state"
        >立即登录</van-button
      >

      <van-button
        disabled
        type="primary"
        size="large"
        class="btn"
        v-show="state"
        >立即登录</van-button
      >
      <p @click="goR()">还没账号?去注册</p>
    </div>
  </div>
  </transition>
</template>

<script>
import { $get, $post } from "@/ajax";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      acc: "",
      pwd: "",
      state: true,
      form: {
        grant_type: "password", //获取token采用密码模式
        client_id: "sobook4", //应用ID
        client_secret: "444444", //密钥
      },
      visible:false,
    };
  },

  watch: {
    //监听账号框的长度
    username() {
      this.acc = this.username;
      if (this.acc.length > 0 && this.pwd.length > 0) {
        //显示登录按钮
        this.state = false;
      } else {
        this.state = true;
      }
    },
    //监听密码框的长度
    password() {
      this.pwd = this.password;
      if (this.acc.length > 0 && this.pwd.length > 0) {
        //显示登录按钮
        this.state = false;
      } else {
        this.state = true;
      }
    },
  },

  methods: {
	...mapMutations("tabbar", ["tabId"]),
    onClickLeft() {
      this.$router.push("/center");
	  this.tabId(3);
    },

    goR() {
      this.$router.push("/registered");
    },

   ...mapMutations("user", ["show", "userInfo"]),
    toLogin() {
      if (this.username != "" && this.password != "") {
        //备份
        let form = {
          username: this.username,
          password: this.password,
          grant_type: "password", //获取token采用密码模式
          client_id: "sobook4", //应用ID
          client_secret: "444444", //密钥
        };
        $post("/oauth/token", form)
          .then((res) => {
            localStorage.setItem("token", res.data.access_token);
            //get请求：当登录者的数据[登录者的角色名nickname：登录帐号;role角色]
            $get("/api/info/getUser").then((res) => {
              //用户信息打包
              let userInfo = {
                uname: res.data.nickname,
                uimg: res.data.img,
              };
              //存放到vuex
              this.userInfo(userInfo);

              //role作用：1.确定登录者登录成功之后跳转到哪个页面：2.确定登录者能够访问的页面权限
              localStorage.setItem("role", res.data.role);
              if (res.data.role === "P") {
                this.$router.push("/center");
                this.$toast({
                  duration: 1000,
                  message: `登录成功，欢迎${res.data.nickname}来到书城~`,
                });
                this.show(1);
                return;
              }
            });
          })
          .catch((error) => {
            this.$dialog.alert({
              message: "账号或密码错误",
              confirmButtonColor: "#000",
            });
          });
      }
    },
  },
  mounted() {},
  created() {
    setTimeout(() => {
      this.visible = true;
    }, 200);
  },
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

:deep(.van-icon-arrow-left) {
  color: gray !important;
}

.btn {
  width: 96% !important;
  margin: 0.3rem 2%;
  height: 1rem;
}

.user p {
  text-align: center;
  color: gray;
}

.van-overlay{
	width: 30%;
}

</style>


